<template>
  <view>
    <view class="nav">
      <view>
        <text v-for="(item,index) in navList" :class="index===selectedIndex?'selected':''" :key='item.title'
          @tap='navItemClick(index)'>{{item.title}}</text>
      </view>
    </view>
    <view class="newsList" v-if='$store.state.hasLogin'>
      <view class="item" v-for="item in $store.state.userList" @click="itemClick(item)" :key='item.user_id'>
        <view class="left">
          <image :src="item.u_pic" mode=""></image>
          <view class="num" v-if="item.read">
            {{item.read}}
          </view>
        </view>
        <view class="right">
          <view class="user">
            <view class="info">
              <view class="name">
                {{item.u_name}}
              </view>
              <view class="company">
                {{item.company}}·{{item.position}}
              </view>
            </view>
            <view class="time">
              <text>{{time(item.chats[item.chats.length-1].create_time)}}</text>
              <text class="more">...</text>
            </view>
          </view>
          <view class="msg" v-if="item.chats.length">
            {{item.chats[item.chats.length-1].content}}
          </view>
        </view>
      </view>
    </view>
    <view class="noLogin" v-else>
      <image src="../../static/noLogin.png" mode="widthFix"></image>
      <view class="msg">登录后查看消息</view>
      <view class="login" @click="login">立即登录</view>
    </view>
  </view>
  </view>
  </view>
</template>

<script>
  import {
    initTime
  } from '../../utils/index.js'
  export default {
    data() {
      return {
        navList: [{
            title: '消息'
          },
          {
            title: '看过我'
          },
          {
            title: '新职位'
          },
          {
            title: '对我感兴趣'
          }
        ],
        selectedIndex: 0
      }
    },
    watch: {
      'this.$store.state.userList': {
        deep: true,
        handler(newValue) {
          this.$store.state.userList = newValue
        },
      }
    },
    methods: {
      navItemClick(i) {
        this.selectedIndex = i
      },
      itemClick(info) {
        uni.navigateTo({
          url: '../conversation/conversation?user_id=' + info.user_id,
        })
      },
      login() {
        this.$store.dispatch('login')
      },
      time(t) {
        return initTime(t)
      }
    }
  }
</script>

<style lang="scss">
  .nav {
    width: 750rpx;
    height: 222rpx;
    background: $uni-color-primary;

    view {
      transform: translateY(150rpx);

      text {
        margin-left: 30rpx;
        // 38
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        opacity: .6;
      }

      .selected {
        opacity: 1;
        font-size: 42rpx;
      }
    }
  }

  .newsList {
    .item {
      width: 674rpx;
      padding: 0 38rpx;
      height: 156rpx;
      background: #fff;
      display: flex;
      align-items: center;

      .left {
        width: 104rpx;
        height: 104rpx;
        border-radius: 50%;
        margin-right: 30rpx;
        position: relative;

        image {
          width: 104rpx;
          height: 104rpx;
          border-radius: 50%;
        }

        .num {
          width: 38rpx;
          height: 38rpx;
          border-radius: 50%;
          background: #FF4752;
          position: absolute;
          right: 5rpx;
          top: -5rpx;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          line-height: 38rpx;
        }
      }

      .right {
        width: 540rpx;

        .name,
        .company,
        .time,
        .msg {
          height: 44rpx;
          line-height: 44rpx;
        }

        .user {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .info {
            display: flex;
          }

          .name {
            font-size: 32rpx;
            margin-right: 20rpx;
          }

          .company {
            font-size: 22rpx;
            color: $uni-text-color-grey;
          }

          .time {
            font-size: 22rpx;
            color: $uni-text-color-grey;

            .more {
              font-size: 32rpx;
              margin-left: 20rpx;
            }
          }
        }

        .msg {
          width: 520rpx;
          white-space: nowrap;
          font-size: 26rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #666;
        }
      }
    }
  }

  .noLogin {
    width: 400rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 140rpx;
    transform: translate(-50%, -50%);

    image {
      width: 400rpx;
    }

    .msg {
      text-align: center;
      font-size: 28rpx;
      margin: 120rpx auto 0;
      color: #666;
    }

    .login {
      width: 234rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: $uni-color-primary;
      border-radius: 10rpx;
      margin: 30rpx auto 0;
      font-size: 30rpx;
      color: #fff;
    }
  }
</style>
